Introduction to XML in Flash
by senocular
Example: XML Portfolio
The squirrel finder maintains all of its content
within the XML file. It's just text and easy
to include. However, the XML file can't always
facilitate all of your needed content. Take
images for example. Let's say you want to have
some jpegs loaded in for each item of interest
within your XML document. What then? Well, then
you can just include a reference (i.e. URL)
to the image within the XML and have Flash include
the image from that. Good news. This can also
be applied to text. So, basically, your XML
can consist almost solely of URLs. This XML
portfolio(-esque) example does pretty much just
that.
[
click on a thumb for more information ]
Basically the same concepts apply here that
did with the squirrel finder in terms of looping
through children to add the content listed.
This particular example simplifies the interface
a little bit by having everything visible on
screen at the same time but takes an additional
step in content retrieval.
The advantage to doing this, aside from the
fact that you can't have jpegs within your XML,
is that it keeps your XML smaller and lets you
load content on request. This means that the
only data you need to initially load when your
movie starts is a small collection of URLs.
No other text or images are loaded prior to
the point at which a viewer requests them. This
ultimately saves on bandwidth and load time
since it doesn't require everything to preload
even when it might not even be seen.
XML Structure
The XML document contains mostly URLs aside
from one attribute, title. Here's the document
portfolio.xml
Here it is in its entirety:
- <?xml version="1.0"?>
- <portfolio>
- <picture
title = "Tiny
Disk"
- thumb =
"portfolio_images/thumbs/tinydisk.jpg"
- description
= "portfolio_text/tinydisk.txt"
- image =
"portfolio_images/tinydisk.jpg"
/>
-
- <picture
title = "Plug"
- thumb =
"portfolio_images/thumbs/plug.jpg"
- description
= "portfolio_text/plug.txt"
- image =
"portfolio_images/plug.jpg"
/>
-
- <picture
title = "Disk
Collection"
- thumb =
"portfolio_images/thumbs/diskcollection.jpg"
- description
= "portfolio_text/diskcollection.txt"
- image =
"portfolio_images/diskcollection.jpg"
/>
- </portfolio>
Simple. You got yourself a root element portfolio
that contains a list of picture elements. Picture
elements then contain a title and 3 urls to
that picture's content. You got a thumbnail
image, a description and a full sized image.
To help with clarity, some indentation was used
to present the attributes of the picture tags
in a more readable manner. This will not affect
the XML negatively in any way - Flash will read
it just fine.
Preparing the Flash File
In terms of the setup of the movie, the main
screen consists of only four elements. Two are
movieclips for loading the images (one for thumbnails
and the other for large versions). The other
two are text fields (one to display the title
and the other for the description text).
[
layout of portfolio movie ]
Nothing special there. Lets move on to the
scripting.
ActionScript
The ActionScript is set up much like the squirrel
finder. You load the XML and then have a function
called that generates content based on that
information. The only difference here is that
the interaction added uses functions that call
loadMovie and load with a loadVars object to
reach out and retrieve the external content
as specified in the XML document.
Setting some variables: here a spacing variable
for laying out thumbnails is defined along with
an instance of LoadVars to handle loading in
text from a URL.
- var thumb_spacing
= 40;
-
- var description_lv
= new
LoadVars();
- description_lv.onData
= function(raw_text){
- description_txt.text
= raw_text;
- }
Notice that the LoadVars instance doesn't have
an onLoad defined, but rather, an onData. The
onData event is called with the raw contents
of the file make it into Flash. When that happens,
the call gets passed the raw data that was loaded
loaded - direct text prior to parsing. This
onData, by default, as it is defined initially
in Flash, then takes that data and parses it
as needed and then calls the onLoad event which
you should have at this point have defined for
the instance. You can, however, as shown above,
write your own onData handler to catch that
raw data as its loaded directly into Flash.
This will prevent an onLoad call (since the
internal onData is the method that calls onLoad)
but it lets you deal directly with what the
data loaded is before it is parsed. This applies
to both LoadVars and XML where LoadVars parses
the text into Flash variables and XML parses
the text into XMLNode instances. Here, it is
being used to load straight text files into
a text field. (description_txt). If you wanted,
you could also code your own XML parser and
use an onData for your XML instance to intercept
the raw XML text in order to parse it with your
own parser and not Flash's. But why would you
ever want to do a crazy thing like that? Ok,
some over ambitious people out there probably
have their reasons. But, for the most part,
Flash's own parser does fine.
Next is the main function for setting up the
portfolio based on the loaded content.
- function GeneratePortfolio(portfolio_xml){
- var portfolioPictures
= portfolio_xml.firstChild.childNodes;
- for (var
i =
0; i
< portfolioPictures.length;
i++){
- var currentPicture
= portfolioPictures[i];
-
- var currentThumb_mc
= menu_mc.createEmptyMovieClip ("thumbnail_mc"+i,i);
- currentThumb_mc._x
= i
* thumb_spacing;
-
- currentThumb_mc.createEmptyMovieClip("thumb_container",0);
- currentThumb_mc.thumb_container.loadMovie (currentPicture.attributes.thumb);
-
- currentThumb_mc.title
= currentPicture.attributes.title;
- currentThumb_mc.image
= currentPicture.attributes.image;
- currentThumb_mc.description
= currentPicture.attributes.description;
-
-
-
- currentThumb_mc.onRollOver
= currentThumb_mc.onDragOver
= function(){
- info_txt.text
= this.title;
- }
- currentThumb_mc.onRollOut
= currentThumb_mc.onDragOut
= function(){
- info_txt.text
= "";
- }
- currentThumb_mc.onRelease
= function(){
- image_mc.loadMovie(this.image);
- description_lv.load(this.description);
- }
- }
- }
You got your basic loop which goes through
the picture child nodes of the portfolio root
element creating a movie clip for the thumbnail
and adding actions to handle rollovers and releases.
Two movieclips are actually created for the
thumbnails. One represents the actual thumbnail
movie clip and another is created within it
used to load the external thumbnail jpeg. This
is needed because whenever you use loadMovie
on a movie clip, that movie clip loses all variables
and functions assigned to it once the content
(movie or image) loads. This means that without
that inner movie clip to load the jpeg into,
all the variables and event handler functions
we assign to the movie clip right after the
loadMovie call would be cleared once the jpeg
has loaded itself in.
Attributes are assigned to each thumbnail movie
clip and handlers for mouse interaction are
then defined. The rollover functions manage
the info_txt text field. which displays the
title of the picture when the mouse is over
the thumbnail while a release handler uses loadMovie
to load the main image into the placeholder
movie clip (image_mc) and load on the LoadVars
instance to get text into description_txt (as
instructed in its onData handler).
Then you setup and load your XML:
- var portfolio_xml
= new
XML();
- portfolio_xml.ignoreWhite
= true;
- portfolio_xml.onLoad
= function(success){
- if (success)
GeneratePortfolio(this);
- else trace("Error
loading XML file");
- }
- portfolio_xml.load("portfolio.xml");
Now you got yourself a simple portfolio which
is very dynamic and easily editable without
the need for even touching Flash (thanks to
XML and external content). Change a few text
files, swap out a few images and you're set.
|